import React, { Component,PureComponent } from 'react'

import ProgressBar from 'ProgressBar.js'

export default class GambleSvgCircle extends PureComponent {
  constructor(props,context) {
    super(props)
    this.svg = null
  }
  componentDidMount() {
    this.svgCircle()
  } 
  componentDidUpdate(prevProps, prevState) {
    this.svgCircle(this.props.rate)
  }
  componentWillUnmount() { 
    this.svg=null
  }
  svgCircle = () => {
    if (!this.svg) {
      this.svg = new ProgressBar.Circle('#circle-container', {
        color: '#FCB03C',
        strokeWidth: 4,
        fill: '#282b2c',
        trailWidth: 2,
        trailColor: '#4c5254'
      });
    }
    this.svg.animate(this.props.rate, function () {})
  }
  render() {
    return (
      <div id="circle-container" style={{ width: "0.7rem", height: "0.7rem" }}></div>
    )
  }
}